<template>
  <div>
    <el-page-header @back="goBack"></el-page-header>
    <div class="transReset">
      <div class="content">
        <div class="left">
          <div class="title">企业批量付款</div>
          <div class="hint">
            企业可以选择从某一渠道或余额账户向多个同户进行转账
          </div>
          <div class="card">
            <img src="@/assets/imgs/checkAccount/trans_batch.png" alt="" />
          </div>
        </div>
        <div class="right">
          <el-form
            :model="form"
            ref="form"
            :rules="ruleForm"
            label-position="top"
          >
            <el-form-item label="转出">
              <el-select
                v-model="form.payformChannel"
                placeholder="请选择"
                filterable
                class="width512"
                @change="setName"
              >
                <el-option
                  v-for="(item, index) of channelList"
                  :key="index"
                  :label="CHANNEL_TYPE[item.channel]"
                  :value="item.channel"
                ></el-option>
              </el-select>
            </el-form-item>

            <div class="channel-desc">
              <div class="channel-img">
                <img
                  :src="
                    require(`@/assets/imgs/checkAccount/${
                      channelImg[cInfo.channel]
                    }.png`)
                  "
                />
              </div>
              <div class="channel-count">
                <div class="tit">可提现金额</div>
                <div class="count">
                  {{
                    cInfo.channel == "ada" || cInfo.channel == "ali"
                      ? `¥` + cInfo.avlBalance
                      : "-"
                  }}
                </div>
              </div>
            </div>
            <!-- <div class="channel-list">
              <div class="tit">转入渠道</div>
              <div class="list">
                <div
                  class="item"
                  :class="curIdx === idx ? 'active' : ''"
                  v-for="(item, idx) of cList"
                  :key="idx"
                  @click="changeChannel(idx, item.tit)"
                >
                  <img :src="require(`@/assets/imgs${item.url}.png`)" alt="" />
                  <span>{{ item.tit }}</span>
                </div>
              </div>
            </div> -->
            <el-form-item label="上传付款文件" prop="paymentDocuments">
              <el-upload
                class="upload-demo"
                action="/merchantApi/oss/upload"
                :headers="{
                  auth_token: getToken(),
                  auth_tmp: curTmp,
                  auth_tck: curTck,
                }"
                :file-list="paymentDocuments"
                :before-upload="handleBefore"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
              >
                <el-button style="width: 120px" type="primary"
                  >上传文件</el-button
                >
                <div slot="tip" class="el-upload__tip" style="color: #bfbfbf">
                  请务必使用{{ curChaTit }}制定的<span @click="export2Excel()">
                    {{ channelExcel(cInfo.channel) }}
                  </span>
                  <!-- 或者 <span> CSV</span> -->
                  模板生成付款文件。
                  <el-tooltip
                    effect="dark"
                    content="Right Bottom prompts info"
                    placement="right"
                  >
                    <div
                      slot="content"
                      style="
                        max-width: 280px;
                        margin-top: 25px;
                        margin-bottom: 24px;
                      "
                    >
                      <div
                        class="tip-item"
                        v-for="item of tipList"
                        :key="item.tit"
                      >
                        <div class="tit">{{ item.tit }}</div>
                        <div class="desc">
                          {{ item.desc }}
                        </div>
                      </div>
                    </div>
                    <span>查看填写规范</span>
                  </el-tooltip>
                  <div
                    v-if="
                      this.form.payformChannel == 'wechat' &&
                      this.curChaTit == '转账到微信'
                    "
                  >
                    批量转账金额要求：转账金额 ≧0.3元
                  </div>
                </div>
              </el-upload>
            </el-form-item>

            <!-- <el-form-item label="转账金额" prop="cashAmt" class="diyUi">
              <el-input
                v-model="form.cashAmt"
                placeholder=""
                class="width512"
                type="number"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
            <div class="mount-desc">
              转账金额不可超过
              <span style="color: #03bfc6">¥{{ cInfo.lastAvlBalance }}</span>
            </div>
            <el-form-item label="收款方" prop="payee">
              <el-input
                v-model="form.payee"
                placeholder="请输入"
                class="width512"
              ></el-input>
            </el-form-item>
            <el-form-item label="转账名称" prop="goodsTitle">
              <el-input
                v-model="form.goodsTitle"
                placeholder="请输入转账名称"
                class="input_"
                maxlength="50"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                placeholder="请输入备注"
                class="input_"
                maxlength="50"
              ></el-input>
            </el-form-item> -->

            <el-form-item label="" style="margin-top: 50px">
              <el-button class="width120" @click="goBack">返回</el-button>
              <el-button
                type="primary"
                class="width120"
                @click="goCode('SMS_BUSINESS_BATCH_SETTLE_BALANCE_PAY')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <codeDialogVue
      codeId="10"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import { isAmount } from "@/utils/validate";
import { getToken, getUserInfo } from "@/utils/public";
import base64 from "@/utils/code";
import codeDialogVue from "@/components/codeDialog.vue";
// import { export_json_to_excel } from "@/excel/Export2Excel";
import { saveAs } from "file-saver";
import { mapMutations } from "vuex";
import crypto from "@/crypto";
import { randomWord } from "@/utils/getRandom";

export default {
  name: "transferBatch",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      curTmp: null,
      curTck: null,
      len: [8, 9, 10, 11, 12][
        Math.floor(Math.random() * [8, 9, 10, 11, 12].length)
      ],
      tipList: [
        {
          tit: "批次号",
          desc: "11-32位数字/数字+字母组合，例如2023050901",
        },
        {
          tit: "商户流水号",
          desc: "自定流水号，8-32位数字/数字+字母组合，例如202305090001",
        },
        {
          tit: "收款方用户ID",
          desc: "填写云尘付系统内用户ID",
        },
        {
          tit: "收款方名称",
          desc: "收款方企业名称/用户姓名",
        },
        {
          tit: "付款金额（元）",
          desc: "填写付款给收款方的实际金额",
        },
        {
          tit: "备注",
          desc: "填写付款理由或描述，不可为空且小于50位汉字",
        },
      ],
      paymentDocuments: [], // 付款文件
      curIdx: 0,
      curChaTit: "转账到余额",
      cList: [
        {
          tit: "转账到余额",
          url: "/checkAccount/icon_cash",
        },
        {
          tit: "转账到微信",
          url: "/checkAccount/icon_wechat",
        },
        {
          tit: "转账到支付宝",
          url: "/checkAccount/icon_Alipay",
        },
        // {
        //   tit: "转账到银行卡",
        //   url: "/checkAccount/icon_bankcard",
        // },
      ],
      codeType: "",
      channelList: [], //渠道列表
      codeDialog: false,
      cInfo: {
        channel: "ada",
        avlBalance: 0,
      },
      channelImg: {
        wechat: "c3",
        ali: "c2",
        ada: "c1",
        // yse: "银盛",
        // fuiou: "富友",
      },
      form: {
        // payformChannel:"ada"
      },
      ruleForm: {
        paymentDocuments: [{ required: true, validator: this.checkFile }],
        goodsTitle: [
          { required: true, message: "请输入转账名称", trigger: "change" },
        ],
        cashAmt: [
          { required: true, message: "请输入转账金额", trigger: "change" },
          { validator: this.checkAmount, trigger: "change" },
        ],
        payee: [{ required: true, message: "请输入收款方", trigger: "change" }],
        payAmt: [
          {
            required: true,
            message: "请输入充值金额",
            trigger: "change",
          },
          {
            validator: this.checkAmount,
            trigger: "change",
          },
        ],
      },
      tableData: [
        // { index: 0, username: "张三", password: 333, age: 22 },
      ],
      wechatCurTableTit: [
        "批次号",
        "商户流水号",
        "OpenID",
        "收款人姓名",
        "付款金额（元）",
        "备注",
      ],
      wechatCurTableColumn: [
        "merBatchNo",
        "transferNo",
        "accountId",
        "userName",
        "transferAmount",
        "transferRemark",
      ],
      wechatTableTit: "微信批量",
      adaCurTableTit: [
        "批次号",
        "商户流水号",
        "收款方用户id",
        "收款方名称",
        "付款金额（元）",
        "备注",
      ],
      adaCurTableColumn: [
        "merBatchNo",
        "transferNo",
        "accountId",
        "userName",
        "transferAmount",
        "transferRemark",
      ],
      adaTableTit: "汇付批量",
      aliCurTableTit: [
        "批次号",
        "商户流水号",
        "收款人支付宝账号",
        "收款人姓名",
        "付款金额（元）",
        "备注",
      ],
      aliCurTableColumn: [
        "merBatchNo",
        "transferNo",
        "accountId",
        "userName",
        "transferAmount",
        "transferRemark",
      ],
      aliTableTit: "支付宝批量",
    };
  },
  created() {
    this.curTmp = new Date().getTime();
    this.curTck = crypto.set(
      getToken() + "_" + this.curTmp + "_" + randomWord(this.len),
      "a1g0qoalvv19aed3"
    );

    const item = this.$route.query.item
      ? JSON.parse(base64.decode(this.$route.query.item))
      : null;
    let channel = item ? item.channel : "ada";
    console.log(channel);
    if (channel) {
      this.setCurrentChannel(channel);
    }

    this.$http.get("/api/merchant/settleaccount/wallet").then((res) => {
      if (res.code === "0000") {
        //console.log(res.data.channelInfo);
        this.channelList = res.data.channelInfo.filter(
          (item) => item.channel != "douyin"
        );
        this.getInfo(channel);
      }
    });
  },
  watch: {
    "$store.state.testLine": {
      handler(val) {
        if (this.$route.name == this.$options.name) {
          if (val) {
            this.$store.commit("changeTestMode", true);
          }
        }
      },
    },
    deep: true,
  },
  methods: {
    getUserInfo,
    ...mapMutations(["changeLive"]),
    channelExcel(channel) {
      switch (channel) {
        case "ada":
          return "云尘付企业批量付款_汇付.Excel";
        case "wechat":
          return "云尘付企业批量付款_微信.Excel";
        case "ali":
          return "云尘付企业批量付款_支付宝.Excel";
        case "balance":
          return "云尘付企业批量付款_余额.Excel";
      }
    },
    export2Excel() {
      var URL = ""; // 为URL地址
      var FILENAME = ""; // 文件名称
      var oReq = new XMLHttpRequest();

      if (this.form.payformChannel == "ada") {
        URL = "/batch_transfer_adapay_new.xls"; // URL 为URL地址
        FILENAME = "云尘付企业批量付款_汇付.xls";
      } else if (this.form.payformChannel == "ali") {
        URL = "/batch_transfer_alipay_new.xls"; // URL 为URL地址
        FILENAME = "云尘付企业批量付款_支付宝.xls";
      } else if (this.form.payformChannel == "wechat") {
        URL = "/batch_transfer_wechat_new.xls"; // URL 为URL地址
        FILENAME = "云尘付企业批量付款_微信.xls";
      }
      oReq.open("GET", URL, true);
      oReq.responseType = "blob";
      oReq.onload = function () {
        var file = new Blob([oReq.response], {
          type: "blob",
        });
        saveAs.saveAs(file, FILENAME); // that.name为文件名
      };
      oReq.send();
      // require.ensure([], () => {
      //   // const { export_json_to_excel } = require("@/excel/Export2Excel");
      //   const fieldName = this.adaCurTableTit;
      //   const filterVal = this.adaCurTableColumn;
      //   const data =
      //     this.tableData.length > 0
      //       ? this.tableData.map((v) => filterVal.map((j) => v[j]))
      //       : [];
      //   export_json_to_excel(fieldName, data, this.adaTableTit);
      // });
    },
    handleBefore(file) {
      const is2M = file.size / 1024 / 1024 < 2;
      //console.log(file.name);
      if (!file.name.includes("xlsx") && !file.name.includes("xls")) {
        this.$message.warning("只支持xls、xlsx格式");
        return false;
      }
      if (!is2M) {
        this.$message.warning("上传文件大小不能超过2M");
        return false;
      }
      return true;
    },
    checkFile(rule, value, callback) {
      const prop = rule.field;
      //console.log(prop);
      //console.log(this.form[prop]);
      if (this.form[prop]) {
        callback();
      } else {
        callback(new Error("请上传文件"));
      }
    },
    handleRemove() {
      this.paymentDocuments = [];
      this.form.paymentDocuments = undefined;
    },
    handleSuccess(res, file) {
      //console.log(file);
      this.paymentDocuments = [];
      this.paymentDocuments = [file.raw];
      // this.form.paymentDocuments = file.raw;
      this.form.paymentDocuments = res.data.id;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    changeChannel(idx, tit) {
      //console.log(idx);
      this.curIdx = idx;
      this.curChaTit = tit;
    },
    setCurrentChannel(channel) {
      switch (channel) {
        case "ada":
          this.cList = [
            {
              tit: "转账到余额",
              url: "/checkAccount/icon_cash",
            },
            // {
            //   tit: "转账到银行卡",
            //   url: "/checkAccount/icon_bankcard",
            // },
          ];
          this.tipList = [
            {
              tit: "批次号",
              desc: "11-32位数字/数字+字母组合，例如2023050901",
            },
            {
              tit: "商户流水号",
              desc: "自定流水号，8-32位数字/数字+字母组合，例如202305090001",
            },
            {
              tit: "收款方用户ID",
              desc: "填写渠道商户ID",
            },
            // {
            //   tit: "收款方名称",
            //   desc: "收款方企业名称/用户姓名",
            // },
            {
              tit: "付款金额（元）",
              desc: "填写付款给收款方的实际金额",
            },
            {
              tit: "备注",
              desc: "填写付款理由或描述，不可为空且小于50位汉字",
            },
            {
              tit: "其他",
              desc: "批量付款最多支持50条",
            },
          ];
          this.curChaTit = "转账到余额";
          break;
        case "wechat":
          this.cList = [
            {
              tit: "转账到微信",
              url: "/checkAccount/icon_wechat",
            },
            // {
            //   tit: "转账到银行卡",
            //   url: "/checkAccount/icon_bankcard",
            // },
          ];
          this.tipList = [
            {
              tit: "批次号",
              desc: "11-32位数字/数字+字母组合，例如20230509",
            },
            {
              tit: "商户流水号",
              desc: "自定流水号，8-32位数字/数字+字母组合，例如202305090001",
            },
            {
              tit: "Open ID",
              desc: "收款人微信下的个人Open ID",
            },
            {
              tit: "收款人姓名",
              desc: "收款人姓名",
            },
            {
              tit: "付款金额（元）",
              desc: "填写付款给收款方的实际金额，最小转账金额0.3元",
            },
            {
              tit: "备注",
              desc: "填写付款理由或描述，不可为空且小于50位汉字",
            },
            {
              tit: "其他",
              desc: "批量付款最多支持50条",
            },
          ];
          this.curChaTit = "转账到微信";
          break;
        case "ali":
          this.cList = [
            {
              tit: "转账到支付宝",
              url: "/checkAccount/icon_Alipay",
            },
            // {
            //   tit: "转账到银行卡",
            //   url: "/checkAccount/icon_bankcard",
            // },
          ];
          this.tipList = [
            {
              tit: "批次号",
              desc: "11-32位数字/数字+字母组合，例如20230509",
            },
            {
              tit: "商户流水号",
              desc: "自定流水号，8-32位数字/数字+字母组合，例如202305090001",
            },
            {
              tit: "收款人支付宝账号",
              desc: "收款人的支付宝账号",
            },
            {
              tit: "收款人姓名",
              desc: "支付宝账号对应的收款人姓名",
            },
            {
              tit: "付款金额（元）",
              desc: "填写付款给收款方的实际金额，最小转账金额0.1元",
            },
            {
              tit: "备注",
              desc: "填写付款理由或描述，不可为空且小于50位汉字",
            },
            {
              tit: "其他",
              desc: "批量付款最多支持50条",
            },
          ];
          this.curChaTit = "转账到支付宝";
          break;
      }
      this.curIdx = 0;
    },
    codeStateFn(val) {
      if (val) {
        this.submit();
      }
    },
    submit() {
      //console.log(this.curIdx);
      //console.log(this.form);
      // var params = new FormData();
      // params.append("payformChannel", this.form.payformChannel);
      // params.append("fileId", this.form.paymentDocuments);
      // params.append(
      //   "type",
      //   this.curIdx == "0" ? "balance_to_change" : "balance_to_card"
      // );
      let params = {
        payformChannel: this.form.payformChannel,
        fileId: this.form.paymentDocuments,
        type: this.curIdx == "0" ? "balance_to_change" : "balance_to_card",
        payType: this.$route.query.payType ? this.$route.query.payType : "",
      };
      this.$http
        .post(`/api/merchant/settleBalancePay/excelBatchAdd`, params)
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.$message.success(
              "请求已受理，处理结果请前往【企业批量付款】查看。"
            );
            this.testCancel();
            // this.$router.push("/account/wallet");
          }
        });

      // this.$http
      //   .post(
      //     `/api/merchant/settleBalancePay/add?verificationCodeEnum=SMS_BUSINESS_BATCH_SETTLE_BALANCE_PAY`,
      //     {
      //       ...this.form,
      //     }
      //   )
      //   .then((res) => {
      //     if (res.code === "0000") {
      //       this.$message.success("转账成功！");
      //     }
      //   });
    },
    testCancel() {
      this.$store.commit("changeLive", false);
      setTimeout(() => {
        this.$store.commit("changeLive", true);
      }, 0);
      this.$backTo("/account/wallet");
    },
    goCode(val) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (getUserInfo().checkFlag) {
            this.submit();
          } else {
            this.codeType = val;
            this.codeDialog = true;
          }
        }
      });
    },
    goBack() {
      this.$backTo(`/account/wallet`);
      // this.$backTo(`/account/enterprisePayment?item=${this.$route.query.item}`);
    },
    checkAmount(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入转账金额"));
      } else if (Number(value) > Number(this.cInfo.lastAvlBalance)) {
        callback(new Error("不能大于可用余额"));
      } else if (!isAmount(value)) {
        callback(new Error("金额必须为整数或者保留两位小数"));
      } else if (value <= 0) {
        callback(new Error("金额必须大于0"));
      } else {
        callback();
      }
    },
    setBanlance(c) {
      const cInfo = this.channelList.find((item) => item.channel == c);
      this.cInfo = cInfo;
      //console.log(this.cInfo);
    },

    getToken,
    setName(val) {
      //console.log(val);
      this.setBanlance(val);
      this.setCurrentChannel(val);
    },
    getInfo(channel) {
      this.form.payformChannel = channel;
      this.setBanlance(channel);
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let param = {
            ...this.form,
            goodsDesc: "充值",
          };
          //console.log(param);

          this.$http
            .post("/api/merchant/balanceCharge/add", param)
            .then((res) => {
              if (res.code === "0000") {
                window.open(res.data.cashierUrl);
                setTimeout(() => {
                  this.$router.push("/qiye/orderCenter");
                }, 3000);
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tip-item {
  margin: 0px 40px;
  margin-bottom: 16px !important;
  .tit {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
  }
  .desc {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
  }
}
.el-upload__tip {
  span {
    color: #03bfc6;
    cursor: pointer;
  }
}
.channel-list {
  margin-bottom: 30px;
  .list {
    margin-top: 16px;
    display: flex;
    .item {
      width: 187px;
      height: 60px;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #e5e5e5;

      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      cursor: pointer;
      img {
        width: 24px;
        margin-right: 10px;
      }
      span {
        font-size: 14px;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #1d1c1c;
      }

      &.active {
        background: rgba(3, 191, 198, 0.03);
        border: 1px solid #03bfc6;
      }
    }
  }
}

.transReset {
  padding: 57px 95px 125px 95px;
  background: #fff;
  min-width: 1200px;
  min-height: 825px;
  border-radius: 20px 0px 0px 0px;

  .width512 {
    width: 440px;
  }
  .content {
    display: flex;
    .left {
      margin-right: 153px;
      .title {
        margin-top: 15px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d1c1c;
        margin-bottom: 20px;
      }

      .hint {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .card {
        margin-top: 55px;
      }
    }
    .right {
      .mount-desc {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #869daa;
        margin-bottom: 40px;
      }
      :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 24px;
      }

      .diyUi {
        :deep(.el-form-item__label) {
          padding-bottom: 0;
        }
        :deep(.el-input__inner) {
          border: none;
          border-bottom: 1px solid #f0f0f0;
          height: 70px;
          font-size: 34px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: 400;
          color: #1d1c1c;
        }
        :deep(.el-input-group__prepend) {
          border: none;
          background: #fff;
          border-bottom: 1px solid #f0f0f0;
          padding: 0 3px;

          font-size: 34px;
          // font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #666666;
        }
      }

      .channel-desc {
        width: 440px;
        background: #f6f9fb;
        border-radius: 10px;
        padding: 18px 37px;
        display: flex;
        // justify-content: center;
        margin-bottom: 40px;

        .channel-img {
          height: 40px;
          padding-right: 45px;
          border-right: 1px solid #e9e9e9;
        }
        .channel-count {
          height: 40px;
          padding-left: 45px;
          .tit {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #869daa;
          }
          .count {
            font-size: 20px;
            font-family: GothamSSm-Medium, GothamSSm;
            font-weight: 500;
            color: #4f595f;
            // margin-top: 3px;
          }
        }
      }
      .diyUi {
        :deep(.el-form-item__label) {
          padding-bottom: 0;
        }
        :deep(.el-input__inner) {
          border: none;
          border-bottom: 1px solid #f0f0f0;
          height: 70px;
          font-size: 34px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: 400;
          color: #1d1c1c;
        }
        :deep(.el-input-group__prepend) {
          border: none;
          background: #fff;
          border-bottom: 1px solid #f0f0f0;
          padding: 0 3px;

          font-size: 34px;
          // font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #666666;
        }
      }
      :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 24px;
      }

      :deep(.el-form-item__content) {
        line-height: 20px;
      }
      :deep(.el-upload .el-upload-dragger) {
        width: 440px;
        height: 100px;
      }
      :deep(.el-icon-upload) {
        margin-top: 20px;
        line-height: 20px;
      }
      :deep(.el-upload__text2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }
  :deep(.el-input__inner) {
    line-height: 1px !important;
  }
  :deep(
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button
    ) {
    -webkit-appearance: none;
    margin: 0;
  }
}
</style>
